<template>
  <div class="poolLock">
    <assets-head :title="$t('矿池锁仓')"></assets-head>
    <div class="px-32 pb-40">
      <div class="swiper">
        <div class="flex items-center ">
          <!-- <img class="w-128 h-128" src="./images/machine1.png" alt=""> -->
          <img class="w-128 h-128" :src="require(`@/page/financialManagement/images/${ImageStyle(data.mine_index)}.png`)"
            alt="">
          <span class="ml-28 text-white font-600 font-52">
            <template v-if="$i18n.locale === 'CN'">
              {{ data.name_cn }}
            </template>
           <template v-else-if="$i18n.locale === 'zh-CN'">
              {{ data.name }}
            </template>
            <template v-else>
              {{ data.name_en }}
            </template>
          </span>
        </div>
        <div class="mt-50 flex">
          <div class="flex flex-col items-start">
            <span class="font-26 text-grey h-60">{{ $t('适用算法') }}</span>
            <span class="font-40 font-700 text-white mt-16">{{ data.algorithm }}</span>
          </div>
          <div class="flex flex-col items-start ml-60">
            <span class="font-26 text-grey h-60">{{ $t('官方功耗') }}</span>
            <span class="font-40 font-700 text-white mt-16">{{ data.power }}w</span>
          </div>
          <div class="flex flex-col items-start ml-60">
            <span class="font-26 text-grey h-60">{{ $t('额定算力') }}</span>
            <span class="font-40 font-700 text-white mt-16">{{ data.computing_power + data.computing_power_unit }}</span>
          </div>
        </div>
      </div>
      <div class="mt-60 mb-20 text-black font-30 textColor">{{ $t('挖矿收益') }}</div>
      <div class="mb-40">
        <div class="flex greyBg textColor font-26 py-26">
          <span class="flex-1 text-center">{{ $t('币种') }}</span>
          <span class="flex-1 text-center">{{ $t('预计日收益') }}</span>
          <!-- <span class="flex-1 text-center">{{$t('净利润/天')}}</span> -->
          <span class="flex-1 text-center">{{ $t('预计净利润') }}</span>
          <span class="flex-1 text-center">{{ $t('操作') }}</span>
        </div>
        <div class="borderColor flex mainBackground font-26 py-26 textColor">
          <span class="flex-1 flex items-center justify-center">{{ data.outputCurrency }}</span>
          <span class="flex-1 flex items-center justify-center">{{ data.daily_rate }}{{ data.test === true ? '' : '%'
          }}</span>
          <!-- <span class="flex-1 flex items-center justify-center text-green">{{ data.all_rate }}</span> -->
          <span class="flex-1 flex items-center justify-center text-green">{{
            calcMiniProfit(data.test, data.daily_rate, data.investment_min, data.investment_max) }}</span>
          <span class="flex-1 flex justify-center">
            <div @click="data.on_sale === '0' ? null : $router.push({
              path: '/machine-buy',
              //query: data
              query: { obj: JSON.stringify(data) }
            })" class="btn w-160 h-60 text-center text-white" :class="data.on_sale === '0' ? 'inactive' : 'active'">
              {{ data.on_sale === '0' ? $t('已锁定') : data.test === true ? $t('体验') : $t('租用') }}
            </div>
          </span>
        </div>
        <div class="mt-44 mb-20 text-black font-30 textColor">{{ $t('基础数据') }}</div>
        <div>
          <div class="borderColor flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('生产厂家') }}</span>
            <span class="textColor">{{ data.product_factory }}</span>
          </div>
          <div class="border-round flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('额定算力') }}</span>
            <span class="textColor">{{ data.computing_power + data.computing_power_unit }}</span>
          </div>
          <div class="border-round flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('墙上功耗') }}</span>
            <span class="textColor">{{ data.power }}</span>
          </div>
          <div class="border-round flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('外箱尺寸') }}</span>
            <span class="textColor">{{ data.product_size }}</span>
          </div>
          <div class="border-round flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('整机重量') }}</span>
            <span class="textColor">{{ data.weight }}KG</span>
          </div>
          <div class="border-round flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('工作温度') }}</span>
            <span class="textColor">{{ data.work_temperature_min }}℃ ~ {{ data.work_temperature_max }}℃</span>
          </div>
          <div class="border-round flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('工作湿度') }}</span>
            <span class="textColor">{{ data.work_humidity_min }}%RH ~ {{ data.work_humidity_max }}%RH</span>
          </div>
          <div class="border-round flex justify-between items-center font-30 py-34 px-34">
            <span class="text-grey">{{ $t('网络链接') }}</span>
            <span class="textColor">{{ data.internet }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
export default {
  name: "PooLock",
  data() {
    return {
      data: {}
    }
  },
  components: {
    assetsHead,
  },
  created() {
    //this.data = this.$route.query;
    this.data = this.$route.query.obj && JSON.parse(this.$route.query.obj)
  },
  methods: {
    calcMiniProfit(test, daily_rate, invest_min, invest_max) {
      if (test) {
        return daily_rate;
      }
      let daily_base = daily_rate * 0.01;
      let daily_min = (daily_base * invest_min).toFixed(1);
      let daily_max = (daily_base * invest_max).toFixed(1);
      return daily_min + '-' + daily_max;
    },
    ImageStyle(index_id) {
      switch (index_id) {
        case 1: {
          return 'machine_asic'
        }
        case 2: {
          return 'machine_ex'
        }
        case 3: {
          return 'machine_fpga'
        }
        case 4: {
          return 'machine_ipfs'
        }
        case 5: {
          return 'machine_gpu'
        }
        case 6: {
          return 'machine_ck6'
        }
        case 0:
        default: {
          return 'machine1'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  background: #1194F7;
}

.inactive {
  background: #474B62;
}

.poolLock {
  width: 100%;
  box-sizing: border-box;
}

.swiper {
  background: url("./images/machine-bg.png") no-repeat center center;
  padding: 32px 32px 50px 32px;
  box-sizing: border-box;
  border-radius: 9px;
}

.btn {
  border-radius: 6px;
  line-height: 60px
}

.border-round {
  @include themify() {
    border-bottom: 1px solid themed("border_color");
  }

  @include themify() {
    border-right: 1px solid themed("border_color");
  }

  @include themify() {
    border-left: 1px solid themed("border_color");
  }
}
</style>
